<script lang="ts" setup>
import { ref } from 'vue'
import OrderListCart from './OrderListCart.vue'
import { getMedicalOrderList } from '@/services/order'
import type { MedicalOrderPage, MedicalOrderList, MedicalOrderStatusType } from '@/types/order'
// 接收 props
const props = defineProps<{ type: MedicalOrderStatusType }>()
// 定义数据源
const list = ref<MedicalOrderList>([])
// 定义加载状态
const loading = ref(false)
// 定义加载完成
const finished = ref(false)
// 定义请求参数
const params = ref({
  current: 1,
  pageSize: 10,
  type: props.type
})
// 定义数据源对象
const MedicalOrderObj = ref<MedicalOrderPage>({} as MedicalOrderPage)
const onLoad = async() => {
  const res = await getMedicalOrderList(params.value)
  MedicalOrderObj.value = res.data
  list.value = [...list.value, res.data.rows]
  loading.value = false
  params.value.current += 1
  if(MedicalOrderObj.value.total === list.value.length) finished.value = true
}
</script>

<template>
  <div class="order-list">
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <OrderListCart :item="i" v-for="i in list" :key="i.id" />
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.order-list {
  padding: 0 15px;
}
</style>